<template>
    <div style="padding:0 1.25rem;min-height:26.875rem;">
        <el-row class="content2_left_b" style="min-height:28.875rem;">
            <el-col :span="12">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">电商罗盘 </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-radio-group @change="change_lp" v-model="radio3" size="small">
                                <el-radio-button label="0">实时</el-radio-button>
                                <el-radio-button label="1">近一天</el-radio-button>
                                <el-radio-button label="7">近七天</el-radio-button>
                            </el-radio-group>
                        </div>
                    </el-col>
                </el-row>
                <div @click="get_to('https://compass.jinritemai.com/shop?btm_ppre=a6187.b4991.c0.d0&btm_pre=a6187.b0004.c0.d0&btm_show_id=68120ef8-8a32-4e00-8d70-a68aa597283b&from_page=%2Fshop%2Fshort-video-analysis%2Fself')">
                <el-row>
                    <el-col :span="24">
                        <div class='' style='height: 260px;width:scal(100%-20px) ;margin-left:1.25rem;'>
                            <el-table id="dslp" ref="dslp" :data='bg' :height='240' style='width: 100%'>
                                
                                <el-table-column label='商品信息' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="6"> <img style="width:2.5rem;height:2.5rem;" :src="scope.row.cell_info.product.product_img_value.value.value_str" alt=""></el-col>
                                            <el-col :span="18"> 
                                                <div style="font-size:12px;" class="sl_2">{{scope.row.cell_info.product.product_name_value.value.value_str}}</div>
                                                <div style="font-size:12px;">单价 : {{scope.row.cell_info.product.product_price_value.value.value}}</div>
                                            </el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                                <el-table-column label='商品卡曝光人数' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="24"> <div>{{scope.row.cell_info.product_show_ucnt.product_show_ucnt_index_values.index_values.value.value}}</div></el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                                <el-table-column label='商品卡点击人数' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="24"> <div>{{scope.row.cell_info.product_click_ucnt.product_click_ucnt_index_values.index_values.value.value}}</div></el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                                <el-table-column label='商品卡点击率' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="24"> <div>{{(scope.row.cell_info.product_click_ucnt_rate.product_click_ucnt_rate_index_values.index_values.value.value*100).toFixed(2)}}</div></el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                               
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
                </div>
                <div @click="get_to('https://compass.jinritemai.com/shop/commodity/traffic-analysis?from_page=%2Fshop%2Fcommodity%2Fproduct-list&btm_ppre=a6187.b2906.c0.d0&btm_pre=a6187.b904798.c0.d0&btm_show_id=e98253df-29d7-4434-9041-99e7755df122')">
                <el-row>
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="3">
                                <div class="ti">主图分析</div>
                            </el-col>
                            <el-col :span="20">
                                <el-row>
                                    <VueSlickCarousel style="width: 100%" v-bind="carouselOptions" >
                                        <div class="ml-3" v-for="(item, index) in scollList" :key="index">                         
                                            <div class="Tabs_themeHover__6BExd">{{item.product_info.name}}</div>
                                            <img :class="indexs==0?'img1':'img2'" v-for="(items, indexs) in item.online_photos" :src="items.image">
                                        </div>
                                      </VueSlickCarousel>
      

                                </el-row>

                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            </el-col>
          
            <el-col :span="12">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">商品卡搜索</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <el-radio-group @change="change_spk" v-model="radio" size="small">
                                <el-radio-button label="0">实时</el-radio-button>
                                <el-radio-button label="1">近一天</el-radio-button>
                                <el-radio-button label="7">近七天</el-radio-button>
                            </el-radio-group>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class='' style='height: 260px;width:scal(100%-20px) ;margin-left:1.25rem;'>
                            <div @click="get_to('https://compass.jinritemai.com/shop/merchandise-diagnosis?from_page=%2Fshop%2Fcommodity%2Ftraffic-analysis&btm_ppre=a6187.b904798.c0.d0&btm_pre=a6187.b10954.c0.d0&btm_show_id=87c17bf3-1439-44a2-8bba-fc6c8e845023')">
                            
                            <el-table id="spk" ref="spk" :data='ss' :height='400' style='width: 100%'>
                                <el-table-column label='商品信息' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="6"> <img style="width:2.5rem;height:2.5rem;" :src="scope.row.cell_info.product.product_img_value.value.value_str" alt=""></el-col>
                                            <el-col :span="18"> 
                                                <div style="font-size:12px;" class="sl_2">{{scope.row.cell_info.product.product_name_value.value.value_str}}</div>
                                                <div style="font-size:12px;">单价 : {{scope.row.cell_info.product.product_price_value.value.value/100}}</div>
                                            </el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                                <el-table-column label='商品卡曝光人数' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="24"> <div>{{scope.row.cell_info.product_show_ucnt.product_show_ucnt_index_values.index_values.value.value}}</div></el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                                <el-table-column label='商品卡点击人数' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="24"> <div>{{scope.row.cell_info.product_click_ucnt.product_click_ucnt_index_values.index_values.value.value}}</div></el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                                <el-table-column label='商品卡点击率' prop='cell_info'>
                                    <template slot-scope="scope">
                                        <el-row>
                                            <el-col :span="24"> <div>{{(scope.row.cell_info.product_click_ucnt_rate.product_click_ucnt_rate_index_values.index_values.value.value*100).toFixed(2)}}</div></el-col>
                                          </el-row>
                                      </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        </div>
                    </el-col>
                </el-row>

            </el-col>
          
        </el-row>
    </div>
</template>
<script>
import axios from 'axios'
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";

var rolltimer,spktimer
    export default {
        components: {
            VueSlickCarousel 
        },
        data() {
            return {
                carouselOptions: {
        infinite: true,//是否无限循环展示内容
        arrows: false,//展示箭头
        dots: false,//启用点指示器      
        slidesToShow: 4, // 同时显示的项目数量
        slidesToScroll: 4, // 每次滚动的项目数量
        speed: 500,
        autoplay:true
      },


                scollList:[{
                    name:1
                },
                {
                    name:2
                },
                {
                    name:3
                },
                {
                    name:4
                },
               
               
            ],
                radio3:0,
                radio: 0,
                bg:[],
                ss:[],
                tableData: [{ name: '123' }, { name: '123' }, { name: '123' }, { name: '123' }, { name: '123' },{ name: '123' }, { name: '123' }, { name: '123' }, { name: '123' }, { name: '123' }],
            };
        },
        created: function () {
            //商品卡搜索
            var that=this
            
           that.get_lp()
           that.get_spk()
                  //商品主图
          
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpinka_zhutu?shop_id='+this.$store.state.shop_id+'&day=1'
            })
                .then(function (response) {
                    console.log('主图分析',response.data)
                    if(response.data.code==0){
                        that.scollList=response.data.data.data
                    }
                    // that.twjy=response.data.data
                 
                })
                .catch(function (error) {
                    console.log(error)
                })
        },
        mounted: function () {
            this.autoRoll()
            let box=document.getElementById("dslp")
            box.addEventListener("mouseenter",(e)=>{
                this.autoRoll("stop")
            })
            box.addEventListener("mouseleave",(e)=>{
                this.autoRoll()
            })
            this.autoRollspk()
            let box1=document.getElementById("spk")
            box1.addEventListener("mouseenter",(e)=>{
                this.autoRollspk("stop")
            })
            box1.addEventListener("mouseleave",(e)=>{
                this.autoRollspk()
            })
            this.EchartsInit();
        },
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
 
        },　

        methods: {
            get_to(url){
                window.open(url, '_blank')
            },
            change_lp(e){
this.radio3=e
this.get_lp()
            },
            change_spk(e){
this.radio=e
this.get_spk()
            },
            get_lp(){
                var that=this
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpinka_baoguang?shop_id='+this.$store.state.shop_id+'&day='+that.radio3
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.bg=response.data.data.data
                    console.log('电商罗盘',response.data.data)
                    // that.twjy=response.data.data
                    }
             
                  
                })
                .catch(function (error) {
                    console.log(error)
                })
            },
            get_spk(){
                var that=this
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpinka_sosuo?shop_id='+this.$store.state.shop_id+'&day='+that.radio
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.ss=response.data.data.data
                    console.log('商品卡搜索',response.data.data.data)
                    that.twjy=response.data.data
                    }
           
                    // that.$refs.seamlessScroll.reset()
                })
                .catch(function (error) {
                    console.log(error)
                })
            },

            autoRoll(stop){
                if(stop){
                    clearInterval(rolltimer)
                    return
                }
                const table=this.$refs.dslp;
                const divData=table.bodyWrapper;
                rolltimer=setInterval(()=>{
                    divData.scrollTop+=4
                    if(divData.clientHeight+divData.scrollTop==divData.scrollHeight){
                        divData.scrollTop=0
                    }
                },100)
                
            },
            autoRollspk(stop){
                if(stop){
                    clearInterval(spktimer)
                    return
                }
                const table=this.$refs.spk;
                const divData=table.bodyWrapper;
                spktimer=setInterval(()=>{
                    divData.scrollTop+=4
                    if(divData.clientHeight+divData.scrollTop==divData.scrollHeight){
                        divData.scrollTop=0
                    }
                },100)
                
            },
            EchartsInit() {

            }
        }
    }
</script>
<style lang="less">
    .img1{
        width:4rem;
        height:4rem;
        display: inline-block;
        float: left;
        margin:.1rem;
    }
    .img2{
        width:2rem;
        height:2rem;
        display: inline-block;
        float: left;
        margin:.1rem;
    }
    .Tabs_themeHover__6BExd{
        white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  margin: 1rem 0 ;
    }
::v-deep .slick-next {
  right: 10px !important;
}
::v-deep .slick-prev {
  left: 20px !important;
  z-index: 1;
}
  .ul-scoll{
       li{
           margin: 10px;
           padding: 10px;
           background: rgba(186, 218, 207, 0.4);
       }
   }

    .ti{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    margin-left: 0.375rem;
    margin-bottom: 0.1875rem;
    /* color: transparent; */
    /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
    -webkit-background-clip: text;
    }
    .content2_left {
        text-align: center;
        border-radius: .4rem;

    }

    .content2_content {
        text-align: center;
    }

    .bg-purple-light {
        color: #959697;
    }

    .content2_left_b {
        background-color: #fff;
        border-radius: .4rem;
        line-height: 2rem;
        padding: .625rem;
        /* min-height: 28.875rem; */
    }

    .bg-purple {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        margin-left: 0.375rem;
        margin-bottom: 0.1875rem;
        /* color: transparent; */
        /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
        -webkit-background-clip: text;
    }

    .content2_left_title_title {
        color: #959697;
        font-size: 0.7375rem;
    }
    .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 30%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .sl_2{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding:5px
  }
</style>